<template>
  <el-dialog
    class="rechargeDialog"
    v-model="visible"
    :title="dialogDatas.title"
    @closed="onReset"
    destroy-on-close
  >
    <el-form
      :model="form"
      ref="formRef"
      class="px10"

    >
      <el-form-item
        label="目前剩余检测点数" 
        prop="remainingPoints"
      >
        <el-input
          v-model="remainingPoints"
          clearable
          disabled="true"
        />
      </el-form-item>
      <el-form-item
        label="充值检测点数"
        prop="rechargePoints"
        :rules="[
        {
          required: true,
          message: '请填写充值检测点数',
        }
      ]"
      >
        <el-input
          v-model.number="form.rechargePoints"
          placeholder="请输入充值点数"
          clearable
          maxlength="5"
          oninput="value=value.replace(/[^\d]/g,'')"
        />
      </el-form-item>
      <el-form-item
        label="金额"
        prop="amount"
        :rules="[
        {
          required: true,
          message: '请填写金额',
        }
      ]"
      >
        <el-input v-model.number="form.amount" placeholder="请输入充值金额" maxlength="5" oninput="value=value.replace(/[^\d]/g,'')"/>
      </el-form-item>
      <el-form-item
        label="请上传付款凭证"
        prop="paymentVoucherUrl"
        :rules="[
        {
          required: true,
          message: '请上传付款凭证，支持jpeg、png等格式',
        }
      ]"
      >
        <!-- <el-input v-model="dialogDatas.datas.paymentVoucherUrl" type="textarea" /> -->
        <el-upload
          class="avatar-uploader"
          list-type="picture-card"
          :show-file-list="true"
          :multiple="false"
          :limit="1"
          :file-list="fileList.array"
          :action="uploadUrl"
          name="files"
          @success="handleSuccess"
          @remove="handleRemove"
          :on-preview="handlePictureCardPreview"
          :before-upload="beforeAvatarUpload"
        >
          <template #default>
            <el-icon>
              <Plus />
            </el-icon>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img
            w-full
            :src="dialogImageUrl"
            alt="Preview Image"
          />
        </el-dialog>

      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer flex justify-center mb4">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm(formRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, watchEffect, computed } from 'vue';
import type { FormInstance } from 'element-plus';
import { Delete, Download, Plus } from '@element-plus/icons-vue';
import { Upload } from '../../components';
import {
  rechargeCheckPointsRequest
} from '@/api/cooperation/index';
const emit = defineEmits(['updateList']);
const visible = ref(false);
const formRef = ref<FormInstance>();
let dialogDatas = ref({});
const dialogVisible = ref(false);
let remainingPoints = ref(false);

/* 充值提交 */
const getRechargeCheckPointsDatas = async (datas: {}) => {
  const data: any = await rechargeCheckPointsRequest(datas);
};
const dialogImageUrl = ref('');
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
let fileList = reactive({ array: [] });
const uploadUrl = ref('admin/common/uploadFileByPublic');
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (!(rawFile.type == 'image/jpeg'||rawFile.type == 'image/jpg' || rawFile.type == 'image/png'|| rawFile.type == 'image/bmp')) {
    ElMessage.error('请上传jpeg、jpg、png、bmp格式文件')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('上传文件不能超过 5MB!')
    return false
  }
  return true
}
let form = reactive({
  orgId:null,
  rechargePoints: '', //充值检测点数
  amount: '', //金额
  paymentVoucherUrl:''
});


const handleSuccess = (response, file, fileList) => {
  form.paymentVoucherUrl = response.data.url[0]
};

const init = (data: any) => {
  visible.value = true;
  if (data) dialogDatas.value = JSON.parse(JSON.stringify(data));
  remainingPoints = dialogDatas.value.row.remainingPoints;
  form.orgId= dialogDatas.value.row.id
};
const onReset = () => {
  fileList.array=[]
  if (!formRef.value) return;
  formRef.value.resetFields();
};
const onCancel = () => {
  //取消按钮事件
  onReset();
  visible.value = false;
};
const onConfirm =async (formEl: FormInstance | undefined) => {

  if (!formEl) return
  formEl.validate(async(valid) => {
    if (valid) {
      await getRechargeCheckPointsDatas(form)
      //确定按钮事件
      onReset();
      visible.value = false;
      emit('updateList')
    } else {
      console.log('error submit!')
      return false
    }
  })

};
defineExpose({ init });
</script>

<style lang="scss">
.rechargeDialog {
  .el-form-item {
    display: contents;
  }
  .el-form-item__content {
    width: auto;
  }
  .avatar-uploader {
    width: 151px;
    height: 151px;

    overflow: hidden;
  }
  .el-form-item__error {

    position: relative;
}
}
</style>
